<template>
	<view class="steps_box">
		<view class="steps_item"  v-for="index in options" :key="index" :class="index<=active?'active':''">
			<view class="line"></view>
			<view class="cen">{{index}}</view>
			<view class="line"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			options:Number,
			active:{
				type:Number,
				default:1
			}
		},
		data() {
			return {};
		},
		
		methods:{
			
		},
	}
</script>

<style scoped lang="scss">
	.steps_box{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.steps_item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			.cen{
				width: 52rpx;
				height: 52rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				border: 1px solid #aaa;
				font-size: 44rpx;
				color: #aaa;
			}
			.line{
				flex: 1;
				height: 1px;
				background-color: #ccc;
			}
			&.active{
				.cen{
					border: 1px solid #2583DA;
					color: #2583DA;
				}
				.line{
					background-color: #2583DA;
				}
			}
		}
	}
</style>
